<template>
	<view class="page">
		<u-navbar :bgColor="bgColor" :fixed="false" title="随访计划" @rightClick="rightClick" :autoBack="true"></u-navbar>

		<view class="row_a_c">
			<view class="row_a_c ccjj" style="margin-bottom: 20rpx;">
				<view @click="toUrl('/pages/followup/add')">
					<view class="jhname">创建计划</view>
					<view class="tianname">自定义创建随访计划</view>
				</view>
				<image class="cjjh" src="/static/images/cjjh.png"></image>
			</view>
			<view class="row_a_c ccjjb" style="margin-bottom: 20rpx;" @click="toUrl('/pages/followup/template')">
				<view>
					<view style="color: #FF8228;" class="jhname">模板库</view>
					<view style="color: #FF8228;" class="tianname">企业模板</view>
				</view>
				<image class="cjjhb" src="/static/images/mbk.png"></image>
			</view>
		</view>



		<view class="tabs">
			<view class="tab-item" :class="{ active: type == 1 }" @click="switchTab(1)">全部</view>
			<view class="tab-item" :class="{ active: type == 2 }" @click="switchTab(2)">我的</view>
		</view>

		<z-paging ref="paging" v-model="LisData" @query="queryList" usePageScroll>
			<scroll-view scroll-y class="card-list">
				<view v-for="(patient, index) in LisData" :key="index" class="card">
					<view class="card-header">
						<image class="avatar" :src="patient.user.avatar" />
						<view class="info">
							<view class="row_a_c " style="margin-bottom: 8rpx;">
								<view class="name">{{ patient.user.name }} </view>
								<view class="age">{{ patient.user.age }}岁</view>
								<image v-if=" patient.user.gender==1" class="xbb" src="/static/images/nan.png"></image>
								<image v-else class="xbb" src="/static/images/nv.png"></image>
							</view>
							<view class="record">主治医师：{{patient.order.doctor.name}}</view>
							<view class="appointment">上次就诊时间：{{ patient.appointmentTime }}</view>
						</view>
					</view>
					<view class="xxhh"></view>
					<view class="row_a_c space-between jhh">
						<view class="jha">常规随访计划</view>
						<view class="jhaa">第{{patient.plan.step}}次</view>
					</view>
					<view class="row_a_c space-between">
						<view class="row_a_c"></view>
						<view class="qsf center" @click="toUrlInfo(patient.plan.id)">去随访</view>
					</view>
				</view>
			</scroll-view>
		</z-paging>

	</view>
</template>

<script>
	import api_follow from '@/api/follow.js';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
	export default {
		mixins: [ZPMixin],
		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				// this.followPlanListFuc(); //随访计划列表
			}
		},
		data() {
			return {
				access_token: null,
				bgColor: 'rgba(0, 31, 63, 0)',
				searchValue: "",
				type: 1,
				LisData: [],
			};
		},
		methods: {

			toUrlInfo(id) {
				uni.navigateTo({
					url: '/pages/followup/followup-verify?id=' + id
				});
			},


			async queryList(pageNo, pageSize) {
				var per = {
					no_page: pageNo,
					page_size: pageSize,
					type: this.type
				}
				const res = await api_follow.followPlanList(per);
				if (res.code == 1) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.$refs.paging.complete(false);
				}
			},


			//随访计划列表
			// async followPlanListFuc() {
			// 	var per = {
			// 		no_page: 1,
			// 		page_size: 10,
			// 		type: this.type
			// 	}

			// 	const res = await api_follow.followPlanList(per);
			// 	if (res.code == 1) {
			// 		this.LisData = res.data.list
			// 	} else {
			// 		this.$util.msg(res.message);
			// 		return;
			// 	}
			// },

			toUrl(url) {
				this.navTo(url);
			},



			switchTab(tab) {
				this.type = tab;
				// this.followPlanListFuc();
				this.$refs.paging.reload();
			},


		},
	};
</script>

<style scoped>
	.page {
		background-color: #FAFAFA;
		padding: 30rpx;
		height: 100vh;
	}

	.search-bar {
		margin: 20rpx 0;
	}

	.features {
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
	}

	.feature-item {
		text-align: center;
		color: #333;
	}

	.tabs {
		display: flex;
		justify-content: flex-start;
		margin: 20rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.tab-item {
		margin-right: 40rpx;
		padding-bottom: 10rpx;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.95);
		font-weight: 500;
	}

	.tab-item.active {
		color: #2dc6a4;
		border-bottom: 2rpx solid #2dc6a4;
	}

	.card-list {
		margin-top: 20rpx;
	}

	.card {
		width: 686rpx;
		height: 325rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 32rpx;
		margin-bottom: 16rpx;
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 32rpx;
		margin-top: -50rpx;
	}

	.info {
		flex: 1;
	}

	.name {
		font-size: 32rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.age {
		font-size: 28rpx;
		color: #999;
	}

	.record,
	.appointment {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.card-footer {
		display: flex;
		justify-content: flex-end;
		/* 子元素右对齐 */
		margin-top: 24rpx;
	}

	.detail-btn {
		width: 192rpx;
		height: 52rpx;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		border: 2rpx solid #DCDCDC;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.4);

	}

	.process-btn {
		width: 192rpx;
		height: 52rpx;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		border: 2rpx solid #91F6E8;
		font-weight: 400;
		font-size: 28rpx;
		color: #27CCBB;
		margin-left: 20rpx;

	}



	.infowz {
		width: 335rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 32rpx;
	}

	.infob {
		min-height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 40rpx 40rpx 10rpx 40rpx;
	}

	.grjj {
		margin-top: 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.yyjl {
		width: 48rpx;
		height: 48rpx;
	}

	.yyjlwz {
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;

		margin-left: 16rpx;
	}

	.jgfb {
		width: 48rpx;
		height: 48rpx;

	}

	.jgfbwa {
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;
		margin-left: 10rpx;
	}

	.imte {
		margin-bottom: 48rpx;
	}

	.bjzyxx {
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.4);
		margin-right: 20rpx;
	}

	.bjzyxxb {
		font-weight: 400;
		font-size: 25rpx;
		color: rgba(0, 0, 0, 0.4);
	}

	.bjzyxxc {
		font-weight: 1000;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.4);
	}

	.xbb {
		width: 32rpx;
		height: 32rpx;
		margin-left: 20rpx;
	}

	.ccjj {
		width: 385rpx;
		height: 128rpx;
		background: #EAFAFA;
		padding: 24rpx;
		position: relative;
		margin-right: 16rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.ccjjb {
		width: 285rpx;
		height: 128rpx;
		background: #FDF7ED;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 24rpx;
		position: relative;
	}

	.cjjh {
		width: 128rpx;
		height: 128rpx;
		position: absolute;
		right: 10rpx;
	}

	.cjjhb {
		width: 128rpx;
		height: 128rpx;
		position: absolute;
		right: 10rpx;
	}

	.jhname {
		font-weight: 400;
		font-size: 28rpx;
		color: #1FA194;
	}

	.tianname {
		font-weight: 400;
		font-size: 20rpx;
		color: #1FA194;
	}

	.xxhh {
		width: 622rpx;
		height: 2;
		border: 2rpx dashed #D0D0D0;
	}

	.jhh {
		margin-top: 16rpx;
	}

	.jha {
		width: 518rpx;
		height: 40rpx;
		font-family: PingFangSC-Medium, PingFangSC-Medium;
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.85);

	}

	.jhaa {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.by {
		width: 112rpx;
		height: 48rpx;
		background: #F7F7F7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-right: 32rpx;

	}

	.yyy {
		width: 112rpx;
		height: 48rpx;
		background: #F7F7F7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.qsf {
		width: 120rpx;
		height: 48rpx;
		background: rgba(39, 204, 187, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 20rpx;


		font-weight: 400;
		font-size: 24rpx;
		color: #27CCBB;

	}
</style>